<template>




      <div style="width: 50%" :style="{width: '100%', height: '800px'}">

        <h3><b>关键字搜索:</b></h3>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" v-model="searchKeyword" @keyup.enter="searchAddress" />

        <div ref="gaode_Map" id="gaode_Map">
          <el-form  :model="dataInfo" id="floating-form" label-width="80px">
            <h1><b>一标六实数据表</b></h1>
            <p>现有小区:{{ dataInfo.residentsId }}</p>
            <p>实有车辆:{{ dataInfo.vehiclesId }}</p>
            <p>实有房屋:{{ dataInfo.estateId }}</p>
            <p>实有设备:{{ dataInfo.devicesId }}</p>
            <p>实有单位:{{ dataInfo.unitCategoriesId }}</p>
            <p>实有小区: {{ dataInfo.plotId }}</p>
          </el-form>
        </div>



        <el-dialog title="地址及经纬度" :visible.sync="dialogFormVisible">
          <el-form ref="elForm" :model="dataForm" :rules="rules" size="small" label-width="70px" label-position="right"
                   :disabled="!!isDetail">
            <el-form-item label="地点" :label-width="formLabelWidth">
              <el-input v-model="dataForm.kqLocation" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="经度" :label-width="formLabelWidth">
              <el-input v-model="dataForm.kqLongitude" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="维度" :label-width="formLabelWidth">
              <el-input v-model="dataForm.kqLatitude" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
          </div>
        </el-dialog>
      </div>





</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
  name: 'AMapDemo',
  mounted() {
      this.initMap();
  },
  props: [],
  data() {
    return {
      searchKeyword: '',
      searchBox: null,
      dialogFormVisible: false,
      loading: false,
      // visible: false,
      isDetail: false,
      dataForm: {
        kqLocation: undefined,
        kqLongitude: undefined,
        kqLatitude: undefined,
        cronkqAccredit: [],
        kqValidCardRange: undefined,
      },
      dataInfo: {
        residentsId: 0,
        vehiclesId: 0,
        estateId: 0,
        devicesId: 0,
        unitCategoriesId: 0,
        plotId: 0
      },
      rules: {},
      input: "",
      map: null,
      auto: null,
      placeSearch: null,
      lnglat: [],
      markers: [],
      position: {},
      lnglatList: [],
      //要标记的所有点的经纬度
      lnglats: [
        // [108.909074, 34.254225],
        // [116.397428, 39.909230],
        // [112.529269,33.001049],
        // [121.391229,31.251326],
      ],
      tableData:[],
      // 饼图数据
      pieData: [],
      apiData: null,
    }
  },
  methods: {

    initMap() {
      let centerLen = [116.397428, 39.90923];
      AMapLoader.load({
        key: "7a4a86da37b07d754f299478047b8c10", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.AutoComplete", "AMap.PlaceSearch", "AMap.Geocoder"],
      })
        .then((AMap) => {
          this.map = new AMap.Map("gaode_Map", {
            // 设置地图容器id
            viewMode: "3D", //  是否为3D地图模式
            zoom: 18, // 初始化地图级别
            center: centerLen, //中心点坐标
            resizeEnable: true,
          });
          this.lnglats.forEach(item => {
            this.setMarker(item)
          })
          // 监听鼠标点击事件
          this.map.on("click", this.clickMapHandler);
          // 创建搜索控件
          this.searchBox = new AMap.PlaceSearch({
            map: this.map,
          });
        })
        .catch((e) => {
        });
    },

    //   residentsQuery4Count()then(res => {
    //     this.dataInfo.residentsId = res.data
    //   })
    // },
    searchAddress() {
      const keyword = this.searchKeyword;
      if (keyword) {
        this.searchBox.search(keyword); // 使用搜索控件进行搜索
      }
    },
    // 点击地图事件获取经纬度，并添加标记
    clickMapHandler(e) {
      this.dataForm.kqLongitude = e.lnglat.getLng();
      this.dataForm.kqLatitude = e.lnglat.getLat();
      this.lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
      this.setMarker(this.lnglat);
      // 点击地图上的位置，根据经纬度转换成详细地址
      let geocoder = new AMap.Geocoder({});
      let that = this;
      geocoder.getAddress(this.lnglat, function (status, result) {
        if (status === "complete" && result.regeocode) {
          that.dataForm.kqLocation = result.regeocode.formattedAddress;
        } else {
        }
      });
      this.dialogFormVisible = true
      this.position = {
        longitude: e.lnglat.getLng(),
        latitude: e.lnglat.getLat(),
        address: that.address,
      };
      this.input = that.address; //把查询到的地址赋值到输入框
    },
    //  添加标记
    setMarker(lnglat) {
      // this.removeMarker();
      let marker = new AMap.Marker({
        position: lnglat,
      });
      marker.setMap(this.map);
      this.markers.push(marker);
    },
  }
}
</script>

<style lang="scss">

.search_box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 50px;

  .label {
    color: #000;
    width: 100px;
  }
}

.content {
  position: relative;
}

#panel {
  position: absolute;
  top: 50px;
  right: 20px;
}

#gaode_Map {
  overflow: hidden;
  width: 100%;
  height: 800px;
  margin: 0;
}

.amap-sug-result {
  z-index: 2999 !important;
}
.custom-content-marker .close-btn {
  position: absolute;
  top: -6px;
  right: -8px;
  width: 15px;
  height: 15px;
  font-size: 12px;
  background: #ccc;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: 15px;
  box-shadow: -1px 1px 1px rgba(10, 10, 10, .2);
}

#floating-form {
  color: white;
  background-color: #1f2d3d; /* 背景颜色 */
  padding: 20px; /* 内边距 */
  z-index: 1000; /* 确保表单在其他元素之上 */
  position: absolute; /* 使用绝对定位 */
  top: 5%; /* 距离顶部5% */
  left: 0; /* 距离右侧0，使元素靠右 */
  opacity: 0.7; /* 设置透明度为50% */
  width: 300px; /* 设置宽度为200px */
  height: 300px; /* 设置高度为400px */
}
#mapContainer{
  z-index: 100;
}
</style>
